<template>
    <div>
        <div id="container"></div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    name: "gaode",
    props: {
    x: {
      type: [Number, String], // 根据实际情况调整类型
      default: null
    },
    y: {
      type: [Number, String], // 根据实际情况调整类型
      default: null
    }
  },
    data() {
        return {
            map: null //初始化 map 对象
        }
    },
    methods: {
        initMap() {
            const markerContent = `<div class="custom-content-marker"><img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"></div>`
            AMapLoader.load({
                key: "e6e91e6068cdc02a76dafe65021dd1a1", //此处填入我们注册账号后获取的Key
                version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                const position = new AMap.LngLat(this.x, this.y); //Marker 经纬度
                this.map = new AMap.Map("container", { //设置地图容器id
                    mapStyle: "amap://styles/normal",
                    viewMode: "2D", //是否为3D地图模式
                    zoom: 20, //初始化地图级别
                    center: [this.x, this.y], //初始化地图中心点位置
                });

                const marker = new AMap.Marker({
                    position: position,
                    content: markerContent, //将 html 传给 content
                    offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                });
                this.map.add(marker);
            }).catch(e => {
                console.log(e);
            })
        },
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initMap();
    }
}
</script>

<style>
#container {
    width: 100%;
    height: 430px;
}

.custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
}

.custom-content-marker img {
    width: 100%;
    height: 100%;
}

.custom-content-marker .close-btn {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover {
    background: #666;
}
</style>